<template>
	<view class="tutor">
		<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
			v-model="assistantList" @query="getAssistantListData">
			<view class="tutor-nav">
			<!-- <image class="nav-bg"
			 	src="https://img1.baidu.com/it/u=2227962892,145115616&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500">
			 </image> -->
			 <!-- 轮播图 -->
			 <view class="nav-bg">
			  	<swiper class="tui-banner__height" @change="bannerChange" circular :indicator-dots="false"
			  		:interval="4000" :duration="150">
			  		<block v-for="(item,index) in slideList" :key="index">
			  			<swiper-item>
			  				<view class="tui-swiper-item tui-banner__height">
			  					<image :src="ossUrl + (item.imgUrl||'')" mode="aspectFill"></image>
			  				</view>
			  			</swiper-item>
			  		</block>
			  	</swiper>
			  	<tui-swiper-dot radius="50%" backgroundColor="#bfbfbf54" activeBgColor="#fff" :count="slideCount"
			  		:current="slideCurrent"></tui-swiper-dot>
			  </view>
				<tui-navigation-bar :style="{ marginTop: top + 'px',position: 'static'  }"  @init="initNavigation" backgroundColor="#000" :scrollTop="scrollTop">
					<view class="headers">
						<view class="location" @tap="addressSelect">
							<tui-icon name="gps" :size="22" unit="rpx" :color="slideList&&slideList.length ? '#fff' :'#000'"></tui-icon>
							<view class="ellipsis" :style="{color: slideList&&slideList.length ? '#fff' :'#000'  }">{{addressName}}</view>
							<view class="angle"></view>
						</view>
						<view style="width: 70%;">
							<tui-input padding="12rpx 32rpx" placeholderStyle="rgba(0, 0,0, 0.9)" backgroundColor="rgba(255, 255, 255, 0.5)" color="#000" size="28" :borderBottom="false"
								placeholder="请输入关键词搜索" :radius="40" clearable @input="input" @confirm="search"
					@clear="clearInput">
								<template v-slot:left>
									<view class="icon">
										<tui-icon name="search" :size="22" color="#8A9399"></tui-icon><strong></strong>
									</view>
								</template>
							</tui-input>
						</view>
					</view>
				</tui-navigation-bar> 
				<view class="tutot-title">
					<tui-text padding="0" color="#000" text="教练列表" size="36" fontWeight="800"></tui-text>
					<view class="thorui-flex__between">
						<view class="tui-bottom-item" @click="changeCity">
							<view class="tui-bottom-text">不限</view>
							<view class="tutor-checkbox">
								<tui-icon name="arrowdown" size="16" color="#999" v-if="checked"></tui-icon>
							</view>
						</view>
						<view class="tui-bottom-item" @tap="visibleBt=true" style="height: 34rpx;">
							<view class="tui-bottom-text">{{cityName+(districtName?'-':'')+districtName}}</view>
							<tui-icon name="arrowdown" size="20" color="#999"></tui-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="tutor-con">
				<!-- 分类 -->
				<tutor-store-short :ossUrl="ossUrl" :tabs="tabs" @change="changeTabs"></tutor-store-short>
				<!-- 教练列表 -->
				<view class="tutorList" style="margin-top: 40rpx;margin-bottom: 80rpx;">
					<tutor-tutor-item :ossUrl="ossUrl" :tutorDetails="assistantList"
						@toTuorDetails="toTuorDetails" @inviteTutor="inviteTutor"></tutor-tutor-item>
				</view>
			</view>
		</z-paging>
		<tutor-invite :hours="hours"   :assistantId="assistantId" :merchantId="merchantId" @confimInvite="confimInvite" @clear="clearInvite" :visible="inviteVisible" :categoryId="categoryId"></tutor-invite>
		<tui-tabbar @clickTabbar="clickTabbar"></tui-tabbar>
		<!-- <tui-picker zIndex="10000" :show="showDistrict" :pickerData="districtList" textField="name" @hide="showDistrict=false" @change="bindPickerChange">
		</tui-picker> -->
		<tutor-addsss @clear="bindPickerCacel" @confirm="bindPickerCofrim" ref="addessCity" :visible="visibleBt"></tutor-addsss>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import {getAssistantList,getCategoryList,getAreaList,getDistrictList,getSlideshow} from "@/http/api/index/index.js"
	import Cache from '@/utils/cache' 
	export default {
		data() {
			return {
				// 不限
				checked: true,
				cityName: '',
				visibleBt:false,
				hours:[],
				// 区域
				districtList: [],
				showDistrict:false,
				top: 0, //标题图标距离顶部距离
				marginTp:0,
				ossUrl: getApp().globalData.ossurl,// 图片前缀
				districtName: '区域', 
				searchValue: '',// 搜索框输入的值
				// 导航栏
				scrollTop: 0.5,
				// 定位
				addressName: '未获取',
				latitude: '39.54', //经度
				longitude: '116.25', //维度
				addressInfo:{
					latitude: '', // 纬度
					longitude: '', // 经度
					name: '', // 名称
					province: '', // 省份
					city: '', // 市区
					district: '', // 区域
					businessAreaName: '', // 商圈
				},
				// 轮播图
				slideList: [],
				slideCurrent: 0,
				slideCount: 0,
				// 分类数据列表
				selCategoryId: '',
				cityList:[],//城市
				tabs: [],
				// 教练列表
				assistantList: [],
				categoryId:'',//分类id
				assistantId:'',//教练id
				merchantId:'',//商家id
				inviteVisible:false,//教练邀约弹出
			}
		},
		onUnload() {
			uni.$off('adressInfo')
		},
		watch: {
			latitude: {
				handler(val,newVal) {
					console.log(val,newVal)
					if (newVal) {
						this.$utils.getAddress(this.latitude, this.longitude,
							'661f987dcae58c7cb089e589ad3c7b18', (obj) => { 
								Cache.set('adressNmae', obj.name);
								Cache.set('city', obj.city);
								this.cityName=obj.city 
								this.addressName = obj.name;
								// 区域
								getDistrictList({cityName: obj.city}).then(res => {
									if (res.code == 200) {
										this.districtList = res.data
									} else {
										this.$utils.toast(res.msg)
									}
								}).catch(res => {
									this.$utils.toast(res)
								})
							});
					}else{
						this.$utils.getAddress(this.latitude, this.longitude,
							'661f987dcae58c7cb089e589ad3c7b18', (obj) => {
							 
								Cache.set('adressNmae', obj.city? obj.province+'-'+obj.name :obj.name);
								Cache.set('city',   !Array.isArray(obj.city) ? obj.city : obj.province);
								this.cityName= !Array.isArray(obj.city) ? obj.city : obj.province
								this.addressName = obj.city? obj.province+'-'+obj.name :obj.name 
								// 区域
								getDistrictList({cityName: this.cityName}).then(res => {
									if (res.code == 200) {
										this.districtList = res.data
									} else {
										this.$utils.toast(res.msg)
									}
								}).catch(res => {
									this.$utils.toast(res)
								})
							});
					}
				},
				immediate: true
			}
		},
		onShow(){ 
			let access_token = Cache.get('access_token');
			let latitude = Cache.get('latitude'); 
			// 定位数据 
			if(access_token&&latitude=='39.54'){
				this.checkauthorize(); 
			}  
		},
		onLoad() {  
			this.setTabBarIndex({
				index: 1
			})
			 // 轮播数据
			 this.getSwiperData();
			uni.$on('adressInfo',(e)=>{
				this.addressInfo.latitude=e.latitude
				this.addressInfo.longitude=e.longitude
				this.latitude=e.latitude
				this.longitude=e.longitude
				this.addressInfo.name=e.name
				this.addressName=e.address
				this.addressInfo=e 
				 Cache.set('longitude',e.longitude)
				 Cache.set('latitude',e.latitude)
				 Cache.set('city',!Array.isArray(e.poi.city) ? e.poi.city : e.poi.province)
				 Cache.set('adressNmae',e.address)
			})
		},
		methods: {
			...mapMutations(['changeTabItem','setTabBarIndex', 'changeTabBar']),
			initNavigation(e) {
			 		this.top = e.top;
					this.marginTp =e.height
			},
			// 轮播图
			bannerChange: function(e) {
				this.slideCurrent = e.detail.current;
			},
			// 轮播数据
			getSwiperData() {
				// 启动页 1，banner 2首页，3，教练，4动态
				getSlideshow({type: 3}).then(res => {
					if (res.code == 200) {
						this.slideList = res.data;
						this.slideCount = res.data.length;
					} else {
						this.$utils.toast("首页-轮播 " + res.msg)
					}
				}).catch(error => {
					this.$utils.toast("首页-轮播 " + error);
				})
			},
			// 不限
			changeCity: function(){
				this.checked = !this.checked;
				// if(this.checked){
				// 	this.cityName = Cache.get("city");
				// 	this.districtName = '区域';
				// }else{
				// 	this.cityName = '';
				// }
				this.$refs.paging.reload();
			},
			bindPickerCofrim(){
				this.cityName =this.$refs.addessCity.selectedCity.name
				this.districtName = this.$refs.addessCity.selectedDistrict.name == '全部'? '':this.$refs.addessCity.selectedDistrict.name
				this.visibleBt = false
				this.$refs.paging.reload();
			},
			// 区域
			bindPickerCacel: function() { 
				this.cityName =this.$refs.addessCity.selectedCity.name 
				this.districtName = this.$refs.addessCity.selectedDistrict.name == '全部'? '':this.$refs.addessCity.selectedDistrict.name
				this.visibleBt = false
				this.$refs.paging.reload();
			},
			// 定位授权
			checkauthorize () { 
				// 直接尝试获取地理位置
				  this.getLocation(); 
			},
			// 获取当前定位的经纬度
			getLocation() {
				let self = this
				getApp().globalData.initJssdk((jweixin) => {
					jweixin.getLocation({
						type: 'gcj02', 
						success: res => {
							self.latitude = res.latitude;
							self.longitude = res.longitude;
						}
					});
			}) 
			},
			clickTabbar(detils) {
				this.changeTabBar(detils)
			},
			// 搜索框相关事件
			search(e) {
				this.searchValue = e ;
				this.$refs.paging.reload();
			},
			clearInput() {
				this.searchValue = '';
				this.$refs.paging.reload();
			},
			input(e) {
				this.searchValue = e ;
				this.$refs.paging.reload();
			},
			// 地址
			addressSelect() {
				let info = JSON.stringify({latitude:this.latitude,address:this.addressName,longitude:this.longitude});
				uni.navigateTo({
					url: '/pages/index/modules/addressSelect/addressSelect?info=' + info
				})
			},
			// 类型切换tab
			changeTabs(e) {
				this.selCategoryId = e.categoryId;
				this.$refs.paging.reload();
			},
			//进入教练详情
			toTuorDetails(id) {
				uni.navigateTo({
					url: '/pages/index/modules/tutorDetails/tutorDetails?id=' + id
				})
			},
			//成功邀约
			confimInvite(){
				this.inviteVisible=false 
				this.$refs.paging.reload();
			},
			//关闭邀约
			clearInvite(){
				this.inviteVisible=false 
			},
			//邀约
			inviteTutor(ids){
				this.categoryId=ids.categoryId
				this.assistantId=ids.assistantId
				this.merchantId=ids.merchantId
				this.inviteVisible=true  
			},
			// 教练列表分页
			async getAssistantListData(pageNo, pageSize) {
				let districtName = this.districtName; 
				// 分类数据 
				if(!this.selCategoryId){
					await getCategoryList().then(res => {
						if (res.code == 200) {
							this.tabs = res.data || [];
							this.selCategoryId = res?.data[0].id;
							uni.setStorageSync('categoryList', res.data);
						} else {
							this.$utils.toast("首页-分类 " + res.msg);
						}
					}) 
				} 
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					categoryId: this.selCategoryId,
					assistantName: this.searchValue,
					latitude:this.latitude, 
					longitude:this.longitude,
					cityName:this.checked  ? '' : this.cityName,
					districtName:this.checked ? '' :districtName
				}
				getAssistantList(params).then(res => {
					if (res.code == 200) {
						this.$refs.paging.complete(res.rows);
					} else {
						this.$utils.toast(res.msg)
					}
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.tutor-checkbox{
		border: 1px dashed #999;
		width: 20rpx;
		height: 19rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 8rpx;
		margin-left: 11rpx;
	}
	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	.tutor {
		padding-bottom: 220rpx;
		background-color: #f5f5f5 !important;

		/* 导航栏 */
		.tutor-nav {
			width: 100%;
			height: 600rpx;
			position: relative;
			margin-bottom: 31rpx;

			// 背景
			.nav-bg {
				width: 100%;
				height: 100%;
				position: absolute;
					
				.tui-banner__height {
					height: 95%;
					
					.tui-swiper-item {
						width: 100%;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 34rpx;
						font-weight: 600;
					
						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
				}
			}

			.headers {
				width: 85%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 定位
				.location {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					margin-left: 4%;

					.ellipsis {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 100rpx;
						font-size: 24rpx;
						font-weight: 600;
						padding: 0 5rpx;
						color: #000;
					}

					.angle {
						width: 0;
						height: 0;
						border-left: 4px solid transparent;
						border-right: 4px solid transparent;
						border-top: 6px solid #fff;
					}
				}

				// 搜索框
				.navbar-search {
					display: flex;
					align-items: center;
					width: 390rpx;
					height: 60rpx;
					border-radius: 30px;
					background-color: #fff;
					border: 1px solid #FF6800;

					.navbar-search_icon {
						margin: 0 10px;
					}

					.navbar-search_text {
						width: 70%;
						font-size: 14px;
						color: #999;
					}
				}
			}

			.tutot-title {
				width: 92%;
				padding: 0px 4%;
				position: absolute;
				bottom: 0px;
				left: 0;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.tui-bottom-item {
					display: inline-flex;
					margin-left: 32rpx;

					.tui-bottom-text {
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}

		/* 教练列表 */
		.tutor-con {
			width: 92%;
			margin: 0 auto;
		}
	}
</style>